import type { Component } from "solid-js"

import "./index.css"

const TodoBottom: Component<{
  isAllCheckedStatus: boolean
  removeAllCheckedTodoEvent: () => void
  allCheckStatusChangeEvent: () => void
}> = props => {
  const removeAllCheckedTodo = () => {
    props.removeAllCheckedTodoEvent()
  }
  const allCheckStatusChange = () => {
    props.allCheckStatusChangeEvent()
  }
  return (
    <div class="bottom">
      <div>
        <input
          type="checkbox"
          name="allCheck"
          id="allCheck"
          value="allCheck"
          checked={props.isAllCheckedStatus}
          onChange={allCheckStatusChange}
        />
        <label for="allCheck">全选</label>
      </div>
      <button onclick={removeAllCheckedTodo}>删除</button>
    </div>
  )
}

export default TodoBottom
